<template>
  <div class="dialog" v-if="visible">
    <div class="cover-area"></div>
    <div class='dialog-area'>
      <div class='dialog-block' v-if="rewards.length>0">
        <img class='background_img' src="../../../assets/img/wdjp.png" alt="">
        <img class='x' src="../../../assets/img/x.png" alt="" @click='close'>
        <div class='tip'>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
            <van-swipe-item v-for="(item,index) of rewards" :key="index">
              <span class='swipe_img'> <img :src='item.url' /></span>
              <div class='name'>{{item.name}}</div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class='no' v-if="rewards.length==0">
        <img class='img' src="../../../assets/img/wdjp.png" alt="">
        <img class='img1' src="../../../assets/img/11111.png" alt="">
        <img class='x' src="../../../assets/img/x.png" alt="" @click='close'>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      text: '',
      rewards: [],
    }
  },
  mounted() {
    // 避免上下文丢失
    this.handleResize = this.handleResize.bind(this)
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.$refs.swipe.reset()
    },
    show(rewards) {
      this.rewards = rewards
      this.visible = true
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.van-swipe__indicator {
  width: 0.15rem;
  height: 0.15rem;
  background-color: #ec766c;
  border-radius: 100%;
  opacity: 0.3;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  overflow: hidden;
}
.dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cover-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}
.dialog-area {
  width: 70%;
  height: 100%;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .no {
    position: relative;
    top: 25%;
    text-align: center;
    .img {
      width: 100%;
      height: 100%;
    }
    .img1 {
      position: absolute;
      top: 280px;
      left: 50%;
      width: 40%;
      transform: translateX(-50%);
      height: 40%;
    }
    .x {
      width: 66px;
      height: 66px;
      margin-top: 20px;
    }
  }
  .dialog-block {
    position: relative;
    top: 25%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .background_img {
      width: 130%;
      height: 130%;
    }
    .x {
      position: absolute;
      bottom: -120px;
      width: 66px;
      height: 66px;
    }
    .btn {
      position: absolute;
      width: 120%;
      bottom: 20px;
    }
    .btn_close {
      position: absolute;
      bottom: -110px;
    }
    .tip {
      margin-top: 70px;
      .swipe_img {
        display: inline-block;
        height: 300px;
        width: 300px;
        margin: 0 20px;
      }
      font-size: 34px;
      width: 100%;
      position: absolute;
      top: 3.7rem;
      img {
        width: 100%;
        height: 100%;
      }
      .name {
        padding-bottom: 40px;
        height: 45px;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #e14436;
        line-height: 45px;
        margin: 0 20px;
      }
    }
  }
}
</style>